<template>
    <!--左侧房源筛选-->
    <div class="lefMain">
        <!--左侧1-->
        <span class="leftTop">
            <span style="font-size: 18px;white-space: nowrap;font-weight: 600;color: #7a8df1;">{{ $t('text.House.l184')
            }}</span>
            <span class="df" @click="isShowAdd" style="cursor: pointer">
                <img class="addImg" src="../../assets/images/add.svg">
                <div style="font-size: 13px;white-space: nowrap;">{{ $t('text.House.l185') }}</div>
            </span>
        </span>

        <!--左侧2-->
        <div class="leftTopInput">
            <img class="img1" src="../../assets/images/search2.png" />
            <input :placeholder="$t('text.House.l302')" class="leftTop2Input" v-model="realName">
        </div>

        <!--左侧3-->
        <div v-if="isLoad">
            <div class="leftTop2" v-for="item in houseSelect" v-bind:key="item">
                <div class="df" v-for="s in item" v-bind:key="s">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="s.title" :selectList="s.isArea ? areaList : getSelectData(s.dictionaryKey)"
                            :searchKey="s.searchKey" :isShowTitle="s.isShowTitle" :isShowSerach1="s.isShowSerach1"
                            :isShowSerach2="s.isShowSerach2" :inputEndText="s.inputEndText" :isReset="isReset"
                            :isShowBottom="s.isShowBottom" @returnData="setData" :max="s.max" :min="s.min"
                            @clearData="clearData" :fastSearch="s.fastSearch" :isSingle="s.isSingle" :isArea="s.isArea">
                        </RadioSelect>
                    </div>
                </div>
            </div>
        </div>

        <!--左侧4-->
        <div @click="reset" class="resetDiv">{{ $t('text.House.l169') }}</div>


    </div>

    <!--右侧房源列表-->
    <div class="rightMain">
        <!--右侧顶部导航-->
        <div class="rightTop">
            <div class="f1">
                <div class="mapDiv" style="cursor: pointer"
                    @click="this.$router.push({ path: './regionManage', replace: true })">
                    <img class="mapImg" src="../../assets/images/mapIcon.svg">
                    {{ $t('text.House.l186') }}
                </div>
            </div>
            <div class="f1" style="display: flex;justify-content: flex-end;">
                <CommonSelectRouter :dataList="sort.data" :default="sort.default" ref="child1"
                    :myStyles="{ width: 'auto', background: 'none' }" @returnData="setSort" isShowSortImg>
                </CommonSelectRouter>
            </div>
        </div>
        <!--右侧房源数据列表-->
        <div class="rightMain">
            <div class="rightContain">
                <div class="listContain">
                    <table>
                        <tr class="rightList" v-for="item in houseList" v-bind:key="item"
                            @click="this.$router.push({ path: '/neighbourhoodsDetail', query: { id: item.id } })">
                            <td style="width: 105px;position: relative;">
                                <CommonImage class="i1" :src="item.pictureAddress" />
                                <span v-if="item.picNum > 1" class="picNum">+{{ item.picNum }}</span>
                            </td>
                            <td class="tdBottom" style="width: 300px;padding-right: 20px;">
                                <span style="padding-left: 5px;">{{ item.name }}</span>
                                <div class="address">
                                    <img class="addImg" src="../../assets/images/address.svg">
                                    <CommonOmit
                                        :text="item.address == '' || item.address == null ? $t('text.Neighbourhoods.l71') : item.address"
                                        :length="1"></CommonOmit>
                                </div>
                            </td>
                            <td class="tdBottom">
                                <span>{{ item.avPrice == null ? '-' : item.avPrice + 'AED/m²' }}</span>
                                <div class="text1">
                                    {{ $t('text.Neighbourhoods.l72') }}
                                </div>
                            </td>
                            <td class="tdBottom">
                                <span>{{ item.developerBrand == null ? '-' : item.developerBrand }}</span>
                                <div class="text1">
                                    {{ $t('text.Neighbourhoods.l73') }}
                                </div>
                            </td>
                            <td class="tdBottom">
                                <span>{{ item.buildingYears == null ? '-' : item.buildingYears +
                                    $t('text.Neighbourhoods.l75')
                                }}</span>
                                <div class="text1">
                                    {{ $t('text.Neighbourhoods.l74') }}
                                </div>
                            </td>
                            <td class="tdBottom" style="width: 10px;">
                                <span>{{ item.area == null ? '-' : item.area }}</span>
                                <div class="text1">
                                    {{ $t('text.Neighbourhoods.l76') }}
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!--底部分页-->
                <div class="setPage">
                    <el-pagination v-model:current-page="searchData.pageNo" v-model:page-size="searchData.pageSize"
                        :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import { RealEstate } from '../../itemList';
import { communityFindPage, getDropdownBoxData4, searchDel, areaFindTreeAll } from '../../http/api';
import { ElMessage } from 'element-plus'
import CommonImage from '@/components/input/CommonImage.vue';
import RadioSelect from '@/components/select/RadioSelect.vue';
import CommonOmit from '@/components/input/CommonOmit.vue';
export default {
    name: 'RealEstate',
    components: {
        CommonImage,
        RadioSelect,
        CommonOmit
    },
    data() {
        return {
            houseSelect: RealEstate,
            sort: {
                default: this.$t("text.Neighbourhoods.l39"),
                data: [
                    { id: 1, name: this.$t("text.Neighbourhoods.l39") },
                    { id: 2, name: this.$t("text.Neighbourhoods.l40") },
                    { id: 3, name: this.$t("text.Neighbourhoods.l41") },
                    { id: 4, name: this.$t("text.Neighbourhoods.l42") }
                ]
            },
            searchData: {
                pageNo: 1,
                pageSize: 10,
                areaIds_LIKE_RIGHT: ''
            },
            isLoad: false,
            dictionaryTree: {},
            isReset: false,
            houseList: [],
            total: 0,
            fastSearchList: [],
            fastSearchConvert: [],
            areaList: [],
            realName: ""
        }
    },
    mounted() {
        //初始化查询
        this.search()
        //初始化字典数据请求
        getDropdownBoxData4().then(res => {
            if (res !== undefined) {
                this.dictionaryTree = res
                areaFindTreeAll().then(res => {
                    if (res !== undefined) {
                        this.areaList = [{ dictName: this.$t('text.Common.l12'), id: "-1" }, ...res]
                        this.isLoad = true
                    }
                }).catch()
            }
        }).catch()

    },
    methods: {

        //获取字典数据
        getSelectData(key) {
            const data = this.dictionaryTree[key]
            if (data != undefined) {
                return this.dictionaryTree[key]
            } else {
                return [{ dictName: this.$t('text.Common.l12'), dictValue: "-1", }]
            }
        },

        //拼接单个子组件返回来的条件值
        setData(obj) {
            console.log(obj)
            if (obj['buildingYears_END'] != undefined && obj['buildingYears_END'] != '') {
                obj['buildingYears_END'] = new Date().getFullYear() - Number(obj['buildingYears_END'])
            }
            if (obj['buildingYears_BEGIN'] != undefined && obj['buildingYears_BEGIN'] != '') {
                obj['buildingYears_BEGIN'] = new Date().getFullYear() - Number(obj['buildingYears_BEGIN'])
            }
            if (obj['buildingYears_END'] != undefined && obj['buildingYears_END'] != '' && obj['buildingYears_BEGIN'] != undefined && obj['buildingYears_BEGIN'] != '') {
                let temp = obj['buildingYears_END']
                obj['buildingYears_END'] = obj['buildingYears_BEGIN']
                obj['buildingYears_BEGIN'] = temp
            }
            this.searchData = { ...this.searchData, ...obj }
            console.log(JSON.stringify(this.searchData))
        },

        //子组件选择了不限，进行删除指定字段
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
            console.log(JSON.stringify(this.searchData))
        },

        clearData2(obj) {
            const objKeys = Object.keys(obj);
            return Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
        },

        //从有子集的组织树字典中根据值匹配出name值
        getSubsetTreeName(arr, dictValue) {
            for (const item of arr) {
                if (item.dictValue === dictValue) {
                    return item.dictName;
                }
                if (item.children && item.children.length > 0) {
                    const result = this.getSubsetTreeName(item.children, dictValue);
                    if (result) {
                        return result;
                    }
                }
            }
            return '';
        },

        //删除快速保存
        deleteFastSearch(id) {
            searchDel({ id: id }).then(res => {
                if (res !== undefined) {
                    ElMessage.success({
                        showClose: true,
                        message: this.$t("text.Common.l3"),
                        type: 'success',
                    })
                } else {
                    ElMessage.error({
                        showClose: true,
                        message: this.$t("text.Common.l4"),
                        type: 'error',
                    })
                }
            }).catch()
        },

        //选择排序
        setSort(index) {
            let obj
            switch (index) {
                case 1: obj = { avPrice_ORDER: "DESC" }; break;
                case 2: obj = { avPrice_ORDER: "ASC" }; break;
                case 3: obj = { buildingYears_ORDER: "DESC" }; break;
                case 4: obj = { buildingYears_ORDER: "ASC" }; break;
            }
            this.searchData = { ...this.clearData2({ avPrice_ORDER: '', buildingYears_ORDER: '' }), ...obj }
        },


        //搜索数据
        search() {
            communityFindPage(this.searchData).then(res => {
                if (res !== undefined) {
                    this.houseList = res.dataList
                    this.total = res.total
                    console.log(res)
                }
            }).catch()
        },

        //重置
        reset() {
            this.searchData = {
                pageNo: 1,
                pageSize: 10
            }
            this.isReset = !this.isReset
        },
        handleSizeChange(val) {
            this.searchData.size = val
            this.search()
        },
        handleCurrentChange(val) {
            this.searchData.page = val
            this.search()
        },
        // 跳转新增小区页面
        isShowAdd() {
            this.$router.push("/addNeighbourhoods")
        }


    },
    watch: {
        searchData: {
            handler() {
                this.search()
            }
        },
        realName() {
            if (this.realName != "") {
                this.setData({ name_LIKE: this.realName })
            } else {
                this.clearData({ name_LIKE: "" })
            }
        }
    },
    computed: {

    }

}
</script>
    
<style scoped>
.tdBottom {
    border-bottom: 1px solid #eee;
}

table {
    border-spacing: 0 20px;
    padding: 0px 25px;
}

td {
    text-align: left;
}

span {
    font-size: 14px;
}

.address {
    font-size: 12px;
    padding-top: 5px;
    color: rgb(156, 151, 151);
    max-width: 300px;
    align-items: center;
    display: flex;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.lefMain {
    min-width: 310px;
    padding: 15px;
    overflow: auto;
    background: white;
    margin-bottom: 30px;
    margin-right: 5px;
    box-shadow: 1px 10px 30px 4px #e9e9e9;
}

.leftTop {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.leftTop2Input {
    outline: none;
    width: inherit;
    height: 25px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 23px;
    padding-right: 15px;
    background-color: rgb(242, 242, 242);
    border-radius: 5px;
    font-size: 12px;
    position: relative;
}

.leftTop2Input:focus {
    border: 1px solid #6698ff;
}

.leftTopInput {
    display: flex;
    width: 100%;
    position: relative;
    padding-top: 10px;
}

.img1 {
    position: absolute;
    left: 7px;
    width: 15px;
    height: 15px;
    top: 17px;
    z-index: 1;
}

.addImg {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}

.mapImg {
    height: 17px;
    width: 17px;
    padding-right: 3px;
}

.mapDiv {
    display: flex;
    padding-left: 15px;
    font-size: 13px;
    color: #6698ff;
    align-items: center;
    width: fit-content;
}

.img2 {
    width: 22px;
    height: 22px;
}

.items {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
}

.picNum {
    color: white;
    background: #535352;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    bottom: 4px;
    left: 55px;
    transform: scale(0.8);
}

.lb {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    width: 300px;
}

.resetDiv {
    background: #6698ff;
    margin-top: 20px;
    padding: 5px 0;
    font-size: 13px;
    color: white;
    border-radius: 7px;
}

.rightMain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
    overflow: hidden;
}

.rightContain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    margin: 10px 30px 30px 25px;
    position: relative;
    box-shadow: 1px 5px 10px 4px #e9e9e9;
}

.rightList {
    padding: 5px 15px;
}

.rightList:hover {
    background-color: #f0f0f0;
}

.rightTop {
    display: flex;
    padding-top: 12px;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 17px;
}

.f1 {
    flex: 1;
}

.setPage {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding: 10px
}


.i1 {
    width: 90px;
    height: 60px;
}

span {
    white-space: nowrap;
    color: #6698ff;
}

.text1 {
    font-size: 12px;
    color: rgb(156, 151, 151);
    word-break: keep-all;
    white-space: nowrap;
}

.listContain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}
</style>